<template>
 
  <div class="container mx-auto max-w-screen-xl mt-5">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        
      
      </div>
  
      <!-- 右边栏 -->
      <div class="lg:col-span-1">
        <div class="sticky top-21">
          <!-- 用户信息卡片 -->
          <UserInfoCard></UserInfoCard>
          

        </div>
      </div>
    </div>
  </div>
  </template>
  
  
  <script setup lang="ts">
  import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';
  import { getIndexArticles } from '@/service/api/frontend/index'
  import { getCategories } from '@/service/api/frontend/category'
  import { getTags } from '@/service/api/frontend/tag'
  import { useRouter } from 'vue-router'
  import { reactive, ref } from 'vue'
  
  
  
  const router = useRouter()
  
  const goArticleDetail = (articleId) => {
      console.log('跳转详情页' + articleId)
      router.push({ path: '/article/detail', query: { articleId: articleId } })
  }
  
  const articles = ref([])
  // 当前页码
  const current = ref(1)
  const total = ref(0)
  const size = ref(10)
  const pages = ref(0)
  
  // 获取分页数据
  async function getArticles(currentNo) {
     
      const res =  await getIndexArticles({ current: currentNo, size: size.value })
      console.log('获取分页数据')
          console.log(res.data)
  
                  articles.value = res.data.data
                  current.value = res.data.current
                  total.value = res.data.total
                  size.value = res.data.size
                  pages.value = res.data.pages
  
  }
  getArticles(current.value)
  
  // 获取分类
  const categories = ref([])
  getCategories().then((e) => {
      console.log('获取分类数据')
      console.log(e)
      categories.value = e.data
  })
  
  
  // 获取标签
  const tags = ref([])
  getTags().then((e) => {
      console.log('获取标签数据')
      console.log(e)
      tags.value = e.data
  })
  
  
  const goCatagoryArticleListPage = (id, name) => {
      router.push({ path: '/category/list', query: { id: id, name: name } })
  }
  
  const goTagArticleListPage = (id, name) => {
      console.log('跳转 id' + id)
      router.push({ path: '/tag/list', query: { id: id, name: name } })
  }
  
  </script>
  
  
  <style scoped>
  .header-banner {
    min-height: 160px;
  }
  </style> 